import LoadingBar from 'react-redux-loading-bar';
import React from 'react';
import { connect } from 'dva';
import { Layout, Icon, Breadcrumb, Dropdown, Menu, Switch } from 'antd';
import QueueAnim from 'rc-queue-anim';
import { Link } from 'dva/router';
import Login from './login/';
import SiderMenu from './menu/';
// import { getMenusByPathname } from '../../constants/constants.js';
import './index.less';

const { Sider, Header, Content } = Layout;

@connect((state) => {
  return { ...state.app, loading: state.loadingBar === 1 };
})
export default class App extends React.Component {

  siderOnCollapse = () => {
    const { dispatch, collapsed } = this.props;
    dispatch({
      type: 'app/save',
      payload: {
        collapsed: !collapsed,
      },
    });
  }
  menuItemOnClick = (key) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'app/save',
      payload: {
        current: key,
      },
    });
  }
  logoutHandler = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'app/logout',
    });
  }
  itemRender = (route, params, routes, paths) => {
    if (route.path === '/') {
      return <span key={route.path}><Icon type="home" /></span>;
    } else {
      const last = routes.indexOf(route) === routes.length - 1;
      return last ?
        <span key={route.path}>
          <Icon type={route.breadcrumbIcon} />
          &nbsp;
          {route.breadcrumbName}
        </span> : <Link key={route.path} to={paths.join('/')}>
          <Icon type={route.breadcrumbIcon} />
          &nbsp;
          {route.breadcrumbName}
        </Link>;
    }
  }
  menuThemeChange = (checked) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'app/save',
      payload: {
        menuTheme: checked ? 'dark' : 'light',
      },
    });
  }
  render = () => {
    const { collapsed, children, islogin, account, routes, menuTheme } = this.props;
    const loginUser = sessionStorage.getItem('loginUser');
    const loginUserObj = JSON.parse(loginUser);
    if (loginUser === null) {
      return (<Login />);
    } else {
      const topRightDropdown = (
        <Menu style={{ width: 100 }}>
          <Menu.Item>
            <a onClick={this.logoutHandler}>
              <Icon type="poweroff" /> 注销
            </a>
          </Menu.Item>
        </Menu>
      );
      const menuThemeSwitch = (
        <div
          style={{ height: 40, opacity: collapsed ? 0 : 1, whiteSpace: 'nowrap' }}
          className={menuTheme === 'dark' ? 'app-menutheme-switch-dark' : 'app-menutheme-switch-light'}
        >
          <span
            style={{ padding: '2px 6px' }}
            className="app-menutheme-switch-label"
          >
            主题：
          </span>
          <Switch
            defaultChecked={menuTheme === 'dark'}
            checkedChildren={'dark'}
            unCheckedChildren={'light'}
            onChange={this.menuThemeChange}
          />
        </div>
      );
      return (
        <div>
          <LoadingBar className="loadingBar" />
          <Layout className="app-layout">
            <Header className="app-header">
              <span className="app-logo">
                <Icon type="api" />
                <span style={{ marginLeft: 20 }}>WMS管理系统</span>
                <span style={{ marginLeft: 10, fontSize: 10 }}>V1.0.0</span>
              </span>
              <span style={{ float: 'right' }} >
                <Dropdown overlay={topRightDropdown}>
                  <span style={{ cursor: 'pointer' }} className="ant-dropdown-link">
                    {loginUserObj.realName} <Icon type="down" />
                  </span>
                </Dropdown>
              </span>
            </Header>
            <Layout>
              <Sider
                collapsible
                trigger={null}
                width={215}
                collapsedWidth={60}
                collapsed={collapsed}
                className={menuTheme === 'dark' ? 'app-sider-dark' : 'app-sider-light'}
              >
                <div
                  className={menuTheme === 'dark' ? 'app-sider-collapsed-dark' : 'app-sider-collapsed-light'}
                  onClick={this.siderOnCollapse}
                >
                  <Icon type={collapsed ? 'menu-unfold' : 'menu-fold'} />
                </div>
                <SiderMenu />
                {menuThemeSwitch}
              </Sider>
              <Layout>
                <Header className="app-breadcrumb">
                  <Breadcrumb routes={routes} itemRender={this.itemRender} />
                </Header>
                <Content className="app-content">
                  <QueueAnim delay={300} type="bottom" >
                    {children}
                  </QueueAnim>
                </Content>
              </Layout>
            </Layout>
          </Layout>
        </div>
      );
    }
  }
}
